<template>
	<view>
		<!-- #ifndef APP-PLUS -->
		<uni-nav-bar :shadow="false" :border="false" rightText="清除" title="浏览历史" @clickRight="clickRight"></uni-nav-bar>
		<!-- #endif -->
		<!-- 列表渲染组件 -->
		<block v-for="(item,index) in historyList" :key="index">
			<commonList :item='item' :index='index'></commonList>
		</block>
		<!-- 兜底样式组件 -->
		<noThing v-if="historyList.length===0">暂无浏览历史，去首页看看吧</noThing>
	</view>
</template>

<script>
// 引入封装的列表数据 模块
import commonList from '@/components/common/common-list.vue';
// 引入兜底样式 组件
import noThing from '@/components/common/no-thing.vue';
	export default {
		components:{
			commonList,
			noThing
		},
		data() {
			return {
				// 浏览历史数据
				historyList:[]
			};
		},
		// 监听页面加载
		onLoad() {
			// 取出历史记录
			let list = uni.getStorageSync('history')
			if(list){
				this.historyList = JSON.parse(list)
			}
			// 监听common-list组件 关注和顶踩
			uni.$on('updateFollSupport', (e) => {
				switch (e.type) {
					case 'follow': // 关注
						this.follow(e.data.user_id);
						break;
					case 'support': // 顶踩 操作
						this.doSupport(e.data);
						break;
				}
			});
			// 监听评论数变化
			uni.$on('updateComments',({id,count})=>{
					// 查询 历史记录列表
					this.historyList.forEach(item=>{
						// 查询到 此篇帖子 id
					    if(item.id===id){
						// 动态修改评论数
						item.comment_count =count
					}
				})
			})
		},
		// 页面卸载 时
		onUnload() {
			// 清除 监听事件
			uni.$off('updateFollSupport', (e) => {});
			uni.$off('updateComments',(e)=>{})
		},
		// 监听原生 标题栏 按钮点击事件
		onNavigationBarButtonTap() {
			this.clear()
		},
		// 存放所有事件
		methods:{
			// #ifndef APP-PLUS
			clickRight(){
				this.clear()
			},
			// #endif
			// 清除浏览记录
			clear(){
				uni.showModal({
					content:'是否要清除浏览记录？',
					success:(res)=> {
						if(res.confirm){
							// 清除本地缓存，指定key的内容
							uni.removeStorageSync('history')
							this.historyList=[]
						}
					}
				})
			},
			// 关注 -------------------------------------------------
			// 使用自定义事件 follow 关注
			follow(user_id) {
				/* 查询 历史记录 列表数据 */
				this.historyList.forEach(item => {
						// 当前点击的用户下的 isFollow (改为true，隐藏关注)
						if (item.user_id === user_id) {
							item.isFollow = !item.isFollow
						}
				});
			},
			// 顶 或 踩 （操作）---------------------------------------
			doSupport(e) {
				// 拿到 浏览历史记录 列表数据
				this.historyList.forEach((item) => {
					// 拿到 每一条 帖子的id
					// 如果列表数据id 和 顶踩 操作id一致
					if (item.id === e.id) {
						// console.log('顶踩操作',item);
						// 判断之前是否已经 赞 或踩 (之前未操作)
						if (item.support.type === '') {
							/* 4. 点击当前 赞 或 踩 数量+1
							 子组件通过 support 判断样式添加，这里需要拼接子组件发布的type值，点击哪一个就让 此 +1 */
							item.support[e.type + '_count']++;
						} else if (item.support.type === 'support' && e.type === 'unsupport') {
							// 如果之前 赞了（判断原数据是赞的，并且 现在点击了 踩）
							// 赞 -1
							item.support.support_count--;
							// 踩 +1
							item.support.unsupport_count++;
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							// 如果之前 踩了（判断原数据是踩的，并且 现在点击了 赞）
							// 赞 +1
							item.support.support_count++;
							// 踩 -1
							item.support.unsupport_count--;
						}
						/* 2. 赋值给，子组件发布的type（赞 或踩）
						   3. 子组件 通过type 判断 添加样式 或 事件 */
						item.support.type = e.type;
					}
				});
				// 消息提示
				let msg = e.type === 'support' ? '点赞成功' : '踩一脚';
				uni.showToast({ title: msg, duration: 500 });
			},
		}
	}
</script>

<style lang="scss">

</style>
